<template>
  <view class="container">
    <!-- 头部菜单部分 -->
    <view class="index-header">
      <view class="person">
        <image class="avatar" src="/static/images/index/person.png"></image>
        <view class="info">
          <p class="name">张三</p>
          <p class="department">网络部</p>
        </view>
      </view>
      <view class="inspect-card-group">
        <view class="inspect-card">
          <view class="card-item">
            <view class="item-left">今日巡检次数</view>
            <view class="item-right">10</view>
          </view>
          <view class="card-item">
            <view class="item-left">本组未巡检数</view>
            <view class="item-right">1</view>
          </view>
        </view>
        <view class="inspect-card">
          <view class="card-item">
            <view class="item-left">异常未办结</view>
            <view class="item-right">10</view>
          </view>
          <view class="card-item">
            <view class="item-left">本组未办结</view>
            <view class="item-right">1</view>
          </view>
        </view>
      </view>
      <view class="menu-card">
        <view class="menu-item">
          <i class="iconfont icon-jihua1"></i>
          <view class="menu-info">巡检计划</view>
        </view>
        <view class="menu-item">
          <i class="iconfont icon-jihua"></i>
          <view class="menu-info">巡检日程</view>
        </view>
        <view class="menu-item">
          <i class="iconfont icon-tongji"></i>
          <view class="menu-info">巡检统计</view>
        </view>
      </view>
      <view class="date-work-group">
        <view class="date-work">
          <view class="work-name">日任务</view>
          <view class="work-value">1</view>
        </view>
        <view class="date-work">
          <view class="work-name">周任务</view>
          <view class="work-value">1</view>
        </view>
        <view class="date-work">
          <view class="work-name">月任务</view>
          <view class="work-value">1</view>
        </view>
        <view class="date-work">
          <view class="work-name">年任务</view>
          <view class="work-value">1</view>
        </view>
      </view>
      <view class="date-card">
      </view>
    </view>

    <!-- 中间任务内容部分 -->
    <view class="index-content">

      <view class="list">
        <view class="list-item" v-for="(item, index) in todoList">
          <view class="item-top">
            <view class="top-left">
              {{item.name}}
            </view>
            <view class="top-right">
              <i class="iconfont icon-tixingshixin"></i>
              <view class="name">待检</view>
            </view>
          </view>
          <view class="item-bottom">
            <view class="bottom-left">
              {{item.address}}
            </view>
            <view class="bottom-right">
              <i class="iconfont icon-zhinanzhidao"></i>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航部分 -->
    <view class="index-footer">
      <view class="footer-item">
        <i class="iconfont icon-shouye" style="color: #3AB54A;"></i>
        <view class="name" style="color: #3AB54A;">首页</view>
      </view>
      <view class="footer-item">
        <i class="iconfont icon-chouchajiancha"></i>
        <view class="name" @click="toQuickCheck(e)">快速检查</view>
      </view>
      <view class="footer-item">
        <i class="iconfont icon-geren"></i>
        <view class="name">我的</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      todoList: [
        {
          name: '汇城数智 1 机房',
          state: '待检',
          address: '中和街道东风路192号2栋一层',
          gis: ''
        },
        {
          name: '汇城数智 2 机房',
          state: '待检',
          address: '中和街道东风路192号2栋一层',
          gis: ''
        },
        {
          name: '水利局 1 机房',
          state: '待检',
          address: '中和街道东风路192号2栋一层',
          gis: ''
        }
      ]
    }
  },
  onLoad() {
  },
  methods: {
    /**
     * 跳转到快速检查页面
     */
    toQuickCheck(e) {
      this.$tab.navigateTo('/pages/inspect/index');
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
}

.index-header {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;

  .person {
    width: 410px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: white;
    display: flex;
    align-items: center;
    flex-direction: row; /* 默认水平排列 */
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
  }
  .info {
    text-align: left;

    .name {
      font-size: 18px;
      margin: 0;
      color: #333;
    }
    .department {
      font-size: 14px;
      color: #666;
    }
  }

  .inspect-card-group {
    display: flex;
    align-items: center;
    flex-direction: row; /* 默认水平排列 */
    gap: 12px;
    margin-top: 8px;

    .inspect-card {
      width: 200px;
      height: 80px;
      border-radius: 6px;
      line-height: 40px;
      font-size: 20px;

      .card-item {
        width: 100%;
        height: 40px;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 16px;
        padding-right: 16px;

        .item-left {

        }

        .item-right {

        }
      }
    }
  }
  .menu-card {
    width: 410px;
    height: 60px;
    background-color: white;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    padding-left: 10px;

    .menu-item {
      width: 80px;
      height: 60px;
      background-color: #F1F5FF;
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid #ccc;
      border-radius: 6px;

      .iconfont {
        font-size: 28px;
      }

      .menu-info {
        line-height: 30px;
        font-size: 16px;
      }
    }
  }
  .date-work-group {
    width: 410px;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: white;
    margin-top: 8px;
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 20px;

    .date-work {
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
  }
}

/* 中间内容区样式(后面换成无限加载列表) */
.index-content {
  width: 100%;
  height: 500px;
  /* background-color: pink; */
  padding-top: 8px;

  .list {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    gap: 10px;

    .list-item {
      width: 410px;
      height: 116px;
      background-color: white;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;

      .item-top {
        height: 54px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 12px;

        .top-left {
          width: 220px;
          height: 100%;
          line-height: 54px;
          font-size: 24px;

        }
        .top-right {
          width: 140px;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 4px;

          .iconfont {
            color: #E99D42;
            font-size: 28px;
          }

          .name {
            font-size: 22px;
          }
        }
      }

      .item-bottom {
        height: 54px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 18px;

        /* todo: 需要设置超出10个字符时省略的效果 */
        .bottom-left {
          width: 220px;
          height: 100%;
          display: flex;
          justify-content: center;
        }
        .bottom-right {
          width: 140px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            font-size: 28px;
            color: #5290FF;
          }
        }
      }
    }
  }
}

/* 底部导航部分样式 */
.index-footer {
  position: absolute;
  bottom: 0px;
  height: 72px;
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: white;
  justify-content: space-between;
  border-top: 1px solid #ddd; /* 浅灰色上边框 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

  .footer-item {
    width: 100px;
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 28px;
    }
    .name {
      font-size: 20px;
    }
  }
}
</style>
